<template>
  <div class="site-list">
    <input-search v-model="queryObj.pointName" placeholder="请输入站点名称" @change="fetchList" />
    <list-view :list="rows" :click-row="handleClickRow">
      <template #title="{ row }">
        <div style="position: relative;display: flex;align-content: center;align-items: center;">
          <template v-if="!isSite">
            <div
              v-if="row.state === 0"
              style="width:10px;height: 10px;background-color: green;border-radius: 50%;margin-right: 8px"
            />
            <div
              v-else
              style="width:10px;height: 10px;background-color: #c22e2e;border-radius: 50%;margin-right: 8px"
            />
          </template>

          <div class="no-wrap margin-right-30" :title="row.pointName">
            {{ row.pointName }}
          </div>
          <div v-if="allowDelete" style="position: absolute;right:18px;top: 2px;">
            <el-link :underline="false" @click="handleDeleteRow(row)">
              <i class="el-icon-delete" />
            </el-link>
          </div>
        </div>
      </template>
    </list-view>
    <div class="page-footer-1">
      <el-pagination small layout="total, prev, next" :total="pagination.total" @current-change="handleCurrentChange">
      </el-pagination>
    </div>
    <!--编辑基本信息-->
    <edit-input ref="EditInput1" v-bind="$props" :success="fetchList"></edit-input>
  </div>
</template>

<script>
import { airPointDelete, airPointPageList } from '@/api/airApi'
import { noisePointDelete, noisePointPageList } from '@/api/noiseApi'
import { waterPointDelete, waterPointPageList } from '@/api/waterApi'
import { smokePointDelete, smokePointPageList } from '@/api/smokeApi'
import { dustPointDelete, dustPointPageList } from '@/api/dustApi'
import EditInput from '@/views/theApp/site/components/EditInput'
import serviceMap from '@/views/theApp/common/serviceMap'

export default {
  name: 'LeftSiteList',
  props: {
    // 是否是站点列表
    isSite: Boolean,
    // 站点编码
    monitorType: {
      type: String,
      default: 'airtype'
    },
    onClickRow: {
      type: Function,
      default: () => {}
    },
    allowDelete: {
      type: Boolean,
      default: false
    }
  },
  components: {
    EditInput
  },
  data() {
    return {
      pagination: {
        total: 0,
        pageNo: 1,
        pageSize: 15
      },
      queryObj: {
        userId: '',
        pointName: ''
      },
      rows: []
    }
  },
  mounted() {
    this.fetchList()
  },
  methods: {
    handleCurrentChange(val) {
      this.pagination.pageNo = val
      this.fetchList()
    },
    // 获取列表
    fetchList() {
      const queryObj = Object.assign({}, this.queryObj, this.pagination)
      let service = serviceMap[this.monitorType].monitorPageList
      if (this.isSite) {
        service = serviceMap[this.monitorType].list
      }
      service(queryObj).then(res => {
        console.log(res)
        const rows = res.rows
        this.pagination.total = res.total
        this.rows = rows
        if (rows.length > 0) {
          this.handleClickRow(rows[0])
        }
      })
    },
    // 删除
    handleDeleteRow(row) {
      this.$confirm('确定删除吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        serviceMap[this.monitorType].remove({ id: row.id }).then(res => {
          this.$message({
            message: `操作成功`,
            type: 'success'
          })
          this.fetchList()
        })
      })
    },
    // 单击行
    handleClickRow(row) {
      this.onClickRow(row)
    },
    // 新增/编辑
    editInput(row) {
      this.$refs.EditInput1.open(row)
    }
  }
}
</script>

<style lang="scss" scoped>
@import '~@/assets/pages/index.scss';
</style>
